import { useState, useEffect, useMemo } from "react";
import { getGoodList } from "../tools/ajax";
import Searchs from "../../components/searchs/searchs";
import { useLocation } from "react-router-dom";
import {NavLink} from 'react-router-dom'
import "./search.css";
import dedupe from "dedupe";
function Search() {
  const location = useLocation();
  console.log(location.state, 2222);
  let [link, setLink] = useState([]);
  let [live, setLive] = useState([]);
  let [chong, setchong] = useState([]);
  async function aa() {
    let res = await getGoodList({ type_one: location.state });
    link = res.data;
    setLink([...link]);
    console.log(link);
    new_list();
  }
  //
  function new_list() {
    chong = [];
    setchong(chong);
    link.forEach((goods) => {
      let hasType = chong.some((obj) => {
        // 判断如果新数组中已经存在当前商品的二级类型
        if (goods.type_two == obj.type) {
          // 把当前商品添加到新数组中对应的分类列表
          obj.list.push(goods);
        }
        return goods.type_two == obj.type;
      });
      // 如果判断结果是,新数组中没有对应的二级分类
      if (!hasType) {
        chong.push({
          type: goods.type_two,
          list: [goods],
        });
        setchong([...chong]);
      }
    });
    console.log(chong);
  }
  useEffect(() => {
    aa();
  }, [location.state]);
  return (
    <div className="home">
      <Searchs></Searchs>
      <ul className="nav">
        {chong.map((item, i) => {
          return <li key={i}>{item.type}</li>;
        })}
      </ul>
      <div class="type_item">
        {chong.map((item) => {
          return (
            <h2 key={item}>
              {item.type}
              <div className="list-box">
                {item.list.map((item1) => {
                  return (
                    <NavLink to= "/title" state={item1.Id}>
                    <div className="bbd" key={item1}>
                      <img src={item1.imageUrl} alt="" />
                      <h4>{item1.title}</h4>
                      <p>
                        <span className="price">￥{item1.priceStr}</span>
                        <span className="mack" v-html="item.mack"></span>
                      </p>
                    </div>
                    </NavLink>
                  );
                })}
              </div>
            </h2>
          );
        })}
      </div>
    </div>
  );
}

export default Search;
